<template>
  <div class="header">访客记录</div>
  <div class="content">
    <div class="section">
      <a-space>
        <a-range-picker
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
          @change="onChange"
        />
        <a-input-search
          v-model:value="uname"
          placeholder="请输入用户名"
          enter-button
          @search="onSearch"
          style="width: 300px"
        />
      </a-space>
    </div>
    <div class="table">
      <a-table
        class="ant-table-striped"
        size="middle"
        :columns="columns"
        :data-source="dataSource.list"
        :row-class-name="
          (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
        "
        bordered
        :pagination="false"
        :row-key="(record) => record.id"
      />
      <a-pagination
        v-model:current="pagenum"
        :total="total"
        @change="pageChange"
        :show-total="(total) => `共 ${total} 条`"
        :page-size="pagesize"
        @showSizeChange="showSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, ref, toRaw, onBeforeMount, isReactive } from "vue"
import { historyApi } from '../../api/home'
export default {
  name: "App",
  setup () {
    const total = ref(100)
    let data = reactive({
      uname: '',
      start_time: '',
      end_time: '',
      pagenum: 1,
      pagesize: 10,
    })
    const dataSource = reactive({ list: [] })
    let refData = toRefs(data)
    onBeforeMount(() => {
      queryList(toRaw(data))
    })
    function queryList (data) {
      historyApi(data).then(res => {
        if (res.meta.state == 200) {
          dataSource.list = res.data.list
          total.value = Number(res.data.total)
        }
      })
    }
    const onChange = (value, dateString) => {
      data.start_time = dateString[0]
      data.end_time = dateString[1]
      console.log(toRaw(data))
    };
    const pageChange = pageNumber => {
      data.pagenum = pageNumber
      queryList(toRaw(data))
    };
    const showSizeChange = (current, pageSize) => {
      data.pagenum = pageSize
      data.pagesize = pageSize
    }
    const onSearch = searchValue => {
      queryList(toRaw(data))
    };
    const columns = [{
      title: '编号',
      dataIndex: 'id',
    }, {
      title: '用户',
      dataIndex: 'username',
    },
    {
      title: '登录方式',
      dataIndex: 'type',
    },
    {
      title: '登录城市',
      dataIndex: 'address',
    },
    {
      title: '登录时间',
      dataIndex: 'login_time',
    },
    {
      title: '上次登录时间',
      dataIndex: 'prev_login_time',
    },
    ];

    return {
      ...refData,
      onChange,
      onSearch,
      columns,
      dataSource,
      total,
      pageChange,
      showSizeChange,
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.ant-table {
  margin: 10px auto;
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
}
.ant-pagination {
  text-align: right;
}
</style>
